<template>
  <a-form-model :model="form" ref="ruleForm" :rules="rules" :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }" >
    <a-form-model-item label="对象" prop="personName">
      <a-input :disabled="true" v-model="form.personName" placeholder="请输入" />
    </a-form-model-item>
    <a-form-model-item label="身份证" prop="identityCard">
      <a-input :disabled="true" v-model="form.identityCard" placeholder="请输入" />
    </a-form-model-item>
    <a-form-model-item label="变更执行地接收部门" prop="receiveDept">
      <a-input :disabled="!footerBool" v-model="form.receiveDept" placeholder="请输入" />
    </a-form-model-item>
    <a-form-model-item label="变更后实际居住地详址" prop="address">
      <a-input :disabled="!footerBool" v-model="form.address" placeholder="请输入" />
    </a-form-model-item>
    <a-form-model-item label="变更原因" prop="reason">
      <a-textarea :disabled="!footerBool" v-model="form.reason" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 6 }" />
    </a-form-model-item>
    <a-form-model-item label="执行日期" prop="leaveTime">
      <a-date-picker :disabled="!footerBool" valueFormat="YYYY-MM-DD" v-model="form.leaveTime" type="date" placeholder="请选择" style="width: 100%;" />
    </a-form-model-item>
    <a-form-model-item label="相关联系人" prop="changePlaceContacts" v-if="footerBool">
      <a-button type="primary" @click="plusJoin"> + </a-button>
      <a-button type="primary" @click="minusJoin" style="margin-left:20px;"> - </a-button>
    </a-form-model-item>
    <div v-for="(item, index) in changePlaceContacts" :key="index">
      <a-form-model-item :label="'联系人姓名'+(index+1)" >
        <a-input v-model="changePlaceContacts[index].contacts_name" placeholder="请输入" /> 
      </a-form-model-item>
      <a-form-model-item :label="'联系人电话'+(index+1)">
        <a-input v-model="changePlaceContacts[index].contacts_phone" placeholder="请输入" /> 
      </a-form-model-item>
      <a-form-model-item :label="'联系人关系'+(index+1)">
        <a-input v-model="changePlaceContacts[index].contacts_relationship" placeholder="请输入" /> 
      </a-form-model-item>
      <a-form-model-item :label="'联系人工作单位'+(index+1)">
        <a-input v-model="changePlaceContacts[index].contacts_unit" placeholder="请输入" /> 
      </a-form-model-item>
    </div>
    <a-form-model-item label="附件上传" prop="file">
      <UploadAvatar ref="uploadAvatar" :avatarType="1" :imgURL="form.file" :disabled="!footerBool" @getAvatar="getAvatar" />
    </a-form-model-item>
    <a-form-model-item label="抄送人" prop="userList" ref="userList">
      <ScopeApplication ref="SelectIndex" :checkedDataType="[1]" :disabled="!footerBool" :isModal="true" @getRangeInfo="getRangeInfo" />
    </a-form-model-item>
  </a-form-model>
</template>

<script>
  import { mapState } from 'vuex'
  import UploadAvatar from '@/components/base/upload/UploadAvatar'
  import ScopeApplication from "@/components/business/ScopeApplication"
  import {changePlaceDdetail} from "@/api/personnelFiles"
  export default {
    props: ['formData','footerBool','applyKey'],
    components: {
      UploadAvatar, ScopeApplication
    },
    data() {
      return {
        form: {},
        changePlaceContacts: [],
        rules: {
          personName: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          identityCard: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          receiveDept: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          address: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          reason: [
            { required: true, message: "请输入", trigger: "change" },
          ],
          changePlaceContacts: [
             { required: true, message: "请添加", trigger: "change" },
          ],
          leaveTime: [
            { required: true, message: "请选择", trigger: "change" },
          ],
          file: [
            { required: true, message: "请上传附件", trigger: "change" },
          ],
        },
      }
    },
    watch: {
      formData: {
        immediate: true,
        handler(val) {
          this.form = Object.assign({}, val)
        },
      },
      applyKey: {
        immediate: true,
        handler(val) {
          if(val) this.getChangePlaceDdetail(val)
        },
      }
    },
    methods: {
      // 获取变更执行地详情
      async getChangePlaceDdetail(id) {
        let obj = this.form
        let res = await changePlaceDdetail(id)
        if(res.status==200)  {
          let data = res.data
          data.file = data.fileId
          this.form = Object.assign({...this.form, ...data})
        }
      },
      // 获取适用范围值
      getRangeInfo(data) {
        this.form.userList = data
      },
      // 获取头像值
      getAvatar(data) {
        if(data.length>0) {
          this.form.file = data.map((obj,index)=>{
            return obj.data;
          }).join(',')
        }
      },
      plusJoin() {
        // console.log(this.changePlaceContacts)
        this.changePlaceContacts.push({
          // changeId: '',
          contacts_name: '',
          contacts_phone: '',
          contacts_relationship: '',
          contacts_unit: ''
        })
        this.form.changePlaceContacts = this.changePlaceContacts
        // console.log(this.form)
      },
      minusJoin() {
        if(this.changePlaceContacts.length>0) {
          this.changePlaceContacts.pop()
        }
        this.form.changePlaceContacts = this.changePlaceContacts
      },
    },
  }
</script>

<style lang="less">
</style>
